<template>
	<view class="container">
		<button @click="getWeather">获取明天天气预报</button>
	
		<view class="weather-box" v-if="weatherInfo">
			<!-- 数据来源网站的"high":"高温 23℃","low":"低温 21℃","ymd":"2025-11-11"，"week":"星期二" -->
			<view class="info-item">日期：{{ weatherInfo.ymd }}</view>
			<view class="info-item">星期：{{ weatherInfo.week }}</view>
			<view class="info-item">最高温：{{ weatherInfo.high }}</view>
			<view class="info-item">最低温：{{ weatherInfo.low }}</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				weatherInfo: null, 
			}
		},
		methods: {
			getWeather() {
			// 使用网络请求接口 uni.request ()
				uni.request({
					url: 'http://t.weather.sojson.com/api/weather/city/101230501',
					success: (res) => {
						console.log("success-----" + JSON.stringify(res));
						
						if (res.statusCode === 200 && res.data.status === 200) {
							// 获取明天的天气预报（forecast[0]对应今天 forecast[1]为明天）
							const tomorrow = res.data.data.forecast[0];
							
							this.weatherInfo = {
								ymd: tomorrow.ymd,
								week: tomorrow.week,
								high: tomorrow.high,
								low: tomorrow.low 
							};
						}
					},
					
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 30rpx;
	}
	button {
		background-color: #007aff;
		color: white;
		padding: 15rpx 0;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}
	.weather-box {
		background-color: #f0f7ff;
		padding: 20rpx;
		border-radius: 8rpx;
	}
	.info-item {
		line-height: 1.8;
		font-size: 28rpx;
	}
</style>